import React from 'react';
import { CaretDownOutlined, UserOutlined  } from '@ant-design/icons';
import { Dropdown, Space, Divider, Button, theme ,Avatar } from 'antd';
import ('./index.css')
const { useToken } = theme;
const items = [
  {
    key: '1',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
        1st menu item
      </a>
    ),
  },
  {
    key: '2',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
        2nd menu item (disabled)
      </a>
    ),
    disabled: true,
  },
  {
    key: '3',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
        3rd menu item (disabled)
      </a>
    ),
    disabled: true,
  },
];
const MyAvatar = () => {
  const { token } = useToken();
  const contentStyle = {
    backgroundColor: token.colorBgElevated,
    borderRadius: token.borderRadiusLG,
    boxShadow: token.boxShadowSecondary,
  };
  const menuStyle = {
    boxShadow: 'none',
  };
  return (
    <div className='avatar-container'>
        <div className='avatar'>
            <Avatar  icon={<UserOutlined />} />
        </div>
        <Dropdown
        menu={{
            items,
        }}
        dropdownRender={(menu) => (
            <div style={contentStyle}>
            {React.cloneElement(menu, {
                style: menuStyle,
            })}
            <Divider
                style={{
                margin: 0,
                }}
            />
            <Space
                style={{
                padding: 8,
                }}
            >
                <Button type="primary">Click me!</Button>
            </Space>
            </div>
        )}
        >
        <a onClick={(e) => e.preventDefault()}>
            <Space>
                游客
            <CaretDownOutlined />
            </Space>
        </a>
        </Dropdown>

    </div>

  );
};
export default MyAvatar;